0
284
ViewsAlternar ejes/cuadrícula en p5.js "debajo" de un dibujo
Actualmente estoy experimentando con arte generativo/codificación creativa. Estoy usando p5.js para generar algunas elipses siguiendo un círculo invisible, que puedo ajustar con algunos controles (cambiar escala, dirección, etc.).
Ahora quiero agregar alguna funcionalidad para alternar algunos ejes/cuadrícula, etc. de esta manera:
Sé que p5.js dibuja 60 veces por segundo y que podría volver a dibujar todo en cada cuadro (lo que creo que podría lograr almacenando todas las elipses, etc. y volver a dibujarlas en cada cuadro, pero para mí esto parece una mala práctica, porque yo tendría que almacenar mucha información solo para volver a dibujar algunos "metadibujos").
Entonces mi pregunta es: ¿Cómo puedo alternar ejes/cuadrícula sin almacenar todo el dibujo de manera eficaz? Mi primer pensamiento fue usar dos hasta N lienzos para "metadibujo" como ejes, cuadrícula, etc. y borrarlos o volver a dibujarlos, si los alterno.
1 answers
Answer question0
Lo he logrado ahora para resolver mi problema (¡otras recomendaciones que usan las mejores prácticas son bienvenidas! :)).
Agregué tres div (un envoltorio para metadibujos, un envoltorio para los dibujos principales y un envoltorio para los otros dos envoltorios). Luego simplemente coloco el contenedor de dibujo principal sobre mi contenedor de meta-dibujo usando css. También estoy usando el modo de instancia p5.js para tener bocetos separados.
HTML:
<div id="drawings-wrapper"> <div id="meta-drawing-wrapper"> </div> <div id="main-drawing-wrapper"> </div> </div>CSS:
#drawings-wrapper { position: absolute; } #meta-drawing-wrapper, #main-drawing-wrapper { position: absolute; top: 0; left: 0 } #meta-drawing-wrapper { z-index: 0; } #main-drawing-wrapper { z-index: 10 }JS:
new p5((sketch) => {...} // meta drawing new p5((sketch) => {...} // main drawingResultado:
